<%@ page import="com.chazz.entity.User" %><%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2020/9/23
  Time: 21:54
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
<% User user=(User)session.getAttribute("user"); %>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户界面</title>
    <style>
        *{padding:0;margin:0;box-sizing: border-box;font-size: 14px;}
        ul,ol{list-style: none;}
        #container{
            margin: auto;
            width: 800px;
            height: 550px;
            border-style: solid;
            border-color: gray;
        }
        #header{
            height: 50px;
            border-bottom-style:solid;
            border-color: gray;
            text-align: center;
        }
        #article{
            width: 797px;
            height: 400px;
            display: flex;
        }
        #article_left{
            width: 150px;
            height: 400px;
        }
        #article_right{
            width: 540px;
            height: 400px;

        }
        #chat{
            border-style: inset;
            border-color: #00b300;
            margin-left: 30px;
            width: 500px;
            height: 400px;
        }
        #article_end{
            width: 100px;
            height: 400px;
        }
        #userList li{
            height: 50px;
            border-style: solid;
            border-color: gray;
        }
        #article_end input{
            width: 90px;
        }
        #msg{
            border-color: red;
            width: 797px;
            height: 100px;
        }
        #sub{
            height: 50px;
        }
        #article_end_top{
            height: 250px;
        }
        #returnIndex{
            margin-bottom: 70px;
        }
        /*#chat li{*/
        /*    margin-top: 20px;*/
        /*    width: 200px;*/
        /*    color: white;*/
        /*    background-color: blue;*/
        /*}*/
        .chatRight{
            margin-left: 280px;
            border-radius: 10px;
            color: black;
            background-color: lawngreen;
            padding: 5px;
            width: 200px;
            margin-top: 20px;
        }
        .chatLeft{
            margin-left: 10px;
            border-radius: 10px;
            color: black;
            background-color:lightsteelblue;
            padding: 5px;
            width: 200px;
            margin-top: 20px;
        }
        .chatBox{
            overflow-y: auto;
            /*background-image: url("images/kebg.jpg");*/
        }
        .chatBox::after {
            content: "";
            background: url(images/kebg.jpg);
            opacity: 0.3;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            position: absolute;
            z-index: -1;
        }

    </style>
</head>
<body>
<div id="container">
    <header id="header">
        <h2>正在联系客服</h2>
        <input type="hidden" name="userEmail" id="userEmail" value="${user.getEmail()}">
    </header>
    <article id="article">
        <div id="article_left">
            <ul id="userList">
                <img src="images/kefu.jpg" width="150px">
                <h2>在线客服</h2>
            </ul>
        </div>
        <div id="article_right">
            <ul id="chat" class="chatBox">

            </ul>
        </div>
        <div id="article_end">
            <div id="article_end_top"></div>
            <input type="button" value="返回首页" id="returnIndex">
            <input type="button" value="发送" id="sub">
        </div>
    </article>
    <footer id="footer">
        <input type="text" size="200" value="" id="msg">
    </footer>
</div>
<script src="js/jquery-3.5.1.js"></script>
<script>
    $(document).ready(function () {
        var webSocket =null;
        var userEmail=$("#userEmail").val();
        if('WebSocket' in window){
            webSocket=new WebSocket('ws://localhost:8080/foraging/chat');

        }else{
            alert("该浏览器不支持")
        }
        webSocket.onopen=function (event) {
            console.log("建立连接");
        }
        webSocket.onclose=function (event) {
            console.log("建立关闭");
        }
        webSocket.onmessage=function (event) {
            //console.log("收到消息:"+event.data);
            var isMian=event.data.split(":");
            if(isMian[0]=="您"){
                $("#chat").append("<li class='chatRight'>"+event.data+"</li>");
                $(".chatBox").scrollTop($(".chat").height());
            }else{
                $("#chat").append("<li class='chatLeft'>"+event.data+"</li>");
                $(".chatBox").scrollTop($(".chat").height());
            }

        }
        webSocket.onerror=function () {
            console.log("通信发生错误");
        }
        window.onbeforeunload=function () {
            webSocket.close();
        }
        $("#sub").on("click",function () {
            var msg=$("#msg").val();
            if(msg!=null){
            msg=userEmail+"`~``~"+msg;

                webSocket.send(msg);
                $("#msg").val(" ");
            }
        });
        $("#returnIndex").on("click",function () {
            location.href='index.jsp';
        });
    });

</script>
</body>
</html>
